<template>
  <div class='container'>

      <div class="Top-column">
  <el-row :gutter="50"  class="el-row" type="flex" >
     <el-col :span="10" class="el-col">
       【题型】:{{foquesTionType(data.questionType)}}
     </el-col>
     <el-col :span="10" class="el-col">
       【编号】:{{data.id}}
     </el-col>
     <el-col :span="10" class="el-col">
       【难度】:{{fodifficulty(data.difficulty)}}
     </el-col>
     <el-col :span="10" class="el-col">
       【标签】:{{data.tags}}
     </el-col>

  </el-row>
   <el-row :gutter="50"  class="el-row" type="flex" >
      <el-col :span="10" class="el-col">
       【学科】:{{data.subjectID}}
     </el-col>
     <el-col :span="10" class="el-col">
       【目录】:{{data.catalogID}}
     </el-col>
     <el-col :span="10" class="el-col">
       【方向】:{{data.direction}}
     </el-col>
     <el-col :span="10" class="el-col">
     </el-col>

   </el-row>
   <hr>
<div>
  <span>【题干】:</span>
  <div v-html="data.question"></div>
  <div>选项:(以下选中的选项为正确答案)</div>
  <el-radio-group v-model="radio">
    <el-radio :label="item.isRight" v-for="item in data.options" :key="item.id" :disabled="item.isRight===0">{{item.title}}</el-radio><br>
  </el-radio-group>
</div>
<hr>
<div>
  <span>【参考答案】：</span>
  <el-button type="danger" @click="vediofn">视频答案预览</el-button>
  <div>
    <video v-show="isshow"
  autopiay
  :src="data.videoURL"
  width="200px"
  controls="controls"
  >
  </video>
  </div>
</div>
<hr>
<div>
  <span>【答案解析】：</span>
  <div v-html="data.answer"></div>

</div>
<hr>
<div style="margin-bottom: 30px">
  <span>【答案备注】：</span>
  {{data.remarks}}
</div>
<div class="button">
  <el-button type="primary" style="float: right" @click="close">关闭</el-button>
</div>

      </div>

  </div>
</template>

<script>
// 引入方法
import { questionType as fquestionType, difficulty as fodifficulty } from '../../api/hmmm/constants'
// 枚举
const difficulty = {}
const questionType = {}
fquestionType.forEach(item => {
  questionType[item.value] = item.label
})

fodifficulty.forEach(item => {
  difficulty[item.value] = item.label
})
export default {
  props: ['data'],
  data () {
    return {
      isshow: false, // 视频弹框是否出现
      radio: 1
    }
  },
  methods: {
    // 枚举方法  题型
    foquesTionType (id) {
      // const rs = fquestionType.questionType.find(item => item.value === value)
      // return rs.value
      return questionType[id]
    },
    // 枚举方法  难度
    fodifficulty (id) {
      // const rs = fquestionType.questionType.find(item => item.value === value)
      // return rs.value
      return difficulty[id]
    },
    // 子组件的方法在父组件实现
    close () {
      this.$emit('closefn')
      // 视频框关闭
      this.isshow = false
    },
    // 点击按钮视频框打开
    vediofn () {
      this.isshow = true
    }
  }
}
</script>

<style scoped lang='scss'>
.container{
  .Top-column{
    .el-row{
      margin-bottom: 20px;
    }
    .button{
      width: 100%;
      height: 30px;

    }
  }
}

</style>
